/* global document */
import React from 'react'
import PropTypes from 'prop-types'
import {Button, Col, Form, Input, message, Row, Select} from 'antd'

const {Option} = Select
const FormItem = Form.Item

const formItemLayout = {
  labelCol: {span: 6},
  wrapperCol: {span: 18},
  style: {
    marginBottom: 10,
  },
}


const Filter = ({
                  onAdd,
                  onFilterChange,
                  productCategory,
                  productBrand,
                  depot,
                  form: {
                    getFieldDecorator,
                    getFieldsValue,
                    setFieldsValue,
                  },
                }) => {

  const valid = fields => {
    const {type, keyword} = fields

    if (!type && keyword) {
      message.warn("请选择查询类型")
      return false
    }

    return true
  }

  const handleSubmit = () => {
    let fields = getFieldsValue()
    if (!valid(fields)) {
      return
    }
    onFilterChange(fields)
  }

  const handleReset = () => {
    const fields = getFieldsValue()
    for (let item in fields) {
      if ({}.hasOwnProperty.call(fields, item)) {
        if (fields[item] instanceof Array) {
          fields[item] = []
        } else {
          fields[item] = undefined
        }
      }
    }
    setFieldsValue(fields)
    handleSubmit()
  }


  return (
    <div>
      <Row gutter={24}>
        <Col md={6} sm={24}>
          <FormItem {...formItemLayout} label="商品名称">
            {getFieldDecorator('goodsName', {})(<Input placeholder="请输入商品名称"/>)}
          </FormItem>
        </Col>
        <Col md={6} sm={24}>
          <FormItem {...formItemLayout} label="商品编号">
            {getFieldDecorator('sn', {})(<Input placeholder="请输入商品编号"/>)}
          </FormItem>
        </Col>
        <Col md={6} sm={24}>
          <FormItem {...formItemLayout} label="商品分类">
            {getFieldDecorator('categoryId',)(
              <Select placeholder={"请选择"} allowClear style={{width: 150}}>
                {productCategory.map(item => (<Option value={item.id}>{item.name}</Option>))}
              </Select>,
            )}
          </FormItem>
        </Col>
        <Col md={6} sm={24}>
          <FormItem {...formItemLayout} label="品牌">
            {getFieldDecorator('brandId',)(
              <Select placeholder={"请选择"} allowClear style={{width: 150}}>
                {productBrand.map(item => (<Option value={item.id}>{item.name}</Option>))}
              </Select>,
            )}
          </FormItem>
        </Col>

      </Row>
      <Row gutter={24}>
        <Col md={6} sm={24}>
          <FormItem {...formItemLayout} label="商品价格">
            <Col span={11}>
              <FormItem>
                {getFieldDecorator('beginPrice')(<Input placeholder="最小值"/>)}
              </FormItem>
            </Col>
            <Col span={2}>
              <span style={{display: 'inline-block', width: '100%', textAlign: 'center'}}>
                -
              </span>
            </Col>
            <Col span={11}>
              <FormItem>
                {getFieldDecorator('endPrice')(<Input placeholder="最大值"/>)}
              </FormItem>
            </Col>
          </FormItem>
        </Col>
        <Col md={6} sm={24}>
          <FormItem {...formItemLayout} label="库存数量">
            <Col span={11}>
              <FormItem>
                {getFieldDecorator('beginStockNum')(<Input placeholder="最小值"/>)}
              </FormItem>
            </Col>
            <Col span={2}>
              <span style={{display: 'inline-block', width: '100%', textAlign: 'center'}}>
                -
              </span>
            </Col>
            <Col span={11}>
              <FormItem>
                {getFieldDecorator('endStockNum')(<Input placeholder="最大值"/>)}
              </FormItem>
            </Col>
          </FormItem>
        </Col>
        <Col md={6} sm={24}>
          <FormItem {...formItemLayout} label="已售数量">
            <Col span={11}>
              <FormItem>
                {getFieldDecorator('beginSaleNum')(<Input placeholder="最小值"/>)}
              </FormItem>
            </Col>
            <Col span={2}>
              <span style={{display: 'inline-block', width: '100%', textAlign: 'center'}}>
                -
              </span>
            </Col>
            <Col span={11}>
              <FormItem>
                {getFieldDecorator('endSaleNum')(<Input placeholder="最大值"/>)}
              </FormItem>
            </Col>

          </FormItem>
        </Col>
        <Col md={6} sm={24}>
          <FormItem {...formItemLayout} label="上下架">
            {getFieldDecorator('status',)(
              <Select placeholder={"请选择"} allowClear style={{width: 150}}>
                <Option value={0}>上架</Option>
                <Option value={1}>下架</Option>
              </Select>,
            )}
          </FormItem>
        </Col>
      </Row>
      <Row gutter={24}>
        <Col md={6} sm={24}>
          <FormItem {...formItemLayout} label="所属仓库">
            {getFieldDecorator('depotId',)(
              <Select placeholder={"请选择"} allowClear style={{width: 150}}>
                {depot.map(item => (<Option value={item.id}>{item.name}</Option>))}
              </Select>,
            )}
          </FormItem>
        </Col>
        <Col md={6} sm={24}>
        </Col>
        <Col md={6} sm={24}>
        </Col>
        <Col md={6} sm={24}>
          <div style={{display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap'}}>
            <div style={window.innerWidth <= 1440 ? {} : {marginLeft: '20%'}}>
              <Button type="primary" className="margin-right" onClick={onAdd}>新增商品</Button>
              <Button type="primary" className="margin-right" onClick={handleSubmit}>查询</Button>
              <Button onClick={handleReset}>重置</Button>
            </div>
          </div>
        </Col>
      </Row>
    </div>
  )
}

Filter.propTypes = {
  onAdd: PropTypes.func,
  form: PropTypes.object,
  filter: PropTypes.object,
  onFilterChange: PropTypes.func,
}

export default Form.create()(Filter)
